<!DOCTYPE html>
<html ng-app="app" lang="en">
    <head>
        <meta charset="UTF-8">
        <title ng-bind="title"></title>
        <link rel="stylesheet" href="../../style/css/bootstrap.css">
        <link rel="stylesheet" href="tooltip.css">
        <style>
            .tooltip.warn .tooltip-arrow {
                border-top-color: yellow;
            }

            .tooltip.warn .tooltip-inner {
                background-color: yellow;
                color: red;
            }
        </style>
        <script src="../../../node_modules/angular/angular.js"></script>
        <script src="../../a.ui.js"></script>
        <script src="../common/position.js"></script>
        <script src="../common/stacked-map.js"></script>
        <script src="tooltip.js"></script>
        <script>
            // bootstrap app
            var app = angular.module('app', ['a.ui']);
            app.run(function ($rootScope) {
                $rootScope.title = 'Tooltip';

            })
        </script>
    </head>
    <body>
        <div class="container">
            <h1 class="text-center" ng-bind="title"></h1>
            <button a-tooltip="On the top" tooltip-placement="top" tooltip-trigger="none" tooltip-is-open="open" type="button" class="btn btn-default">Tooltip top</button>
            <label style="cursor: pointer">
                <input type="checkbox" ng-model="open" ng-init="open=true">
                Toggle Tooltip
            </label>
            <button a-tooltip="On the top" type="button" class="btn btn-default" tooltip-class="warn">Custom Class</button>
            <div class="ui hidden divider"></div>
            <span a-tooltip="Enter something in this input field to disable this tooltip" tooltip-placement="top" tooltip-trigger="mouseenter">Hover over this for a tooltip until this is filled</span>
        </div>
    </body>
</html>